<template>
  <div class="container">
    <div class="contl">
      <div class="head">
        <p>选择一个报价人</p>
        <div>
          <p @click="goAdd">添加</p>
          <i @click="goLess" class="el-icon-remove-outline" v-if="dataList.length>1"></i>
        </div>
      </div>

      
      <div class="item" v-for="(item,index) in dataList" :key="index">
        <el-select v-model="item.sure" placeholder="请选择">
          <el-option
            v-for="(itema,indexa) in item.list" 
            :key="indexa"
            :label="itema.name"
            :value="itema.id">
          </el-option>
        </el-select>
      </div>

      <h6 @click="go_begin">开始报价</h6>
    </div>

    <div class="contr">
      <p>数据分析报价</p>
      <div class="head">
        <el-radio v-model="radio" label="1">同意</el-radio>
        <el-radio v-model="radio" label="2">拒绝</el-radio>
      </div>
      <div v-if="isActive">
        <h6>设置金额</h6>
        <el-input v-model="input" placeholder="请输入内容" class="minput"></el-input>
        <h6>预期(2019-1-1)</h6>
        <el-input v-model="inputa" placeholder="请输入内容"></el-input>

        <div class="fonter">
          <h5 @click="go_generate">生成订单</h5>
          <h4 @click="go_free">免费直接开始</h4>
        </div>
      </div>

      <div v-if="!isActive">
        <h3>填写拒绝理由</h3>
        <textarea v-model="textarea" name="" id="" cols="30" rows="10"></textarea>
        <h2 @click="go_refuse">发送</h2>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
import { Notification } from 'element-ui'
export default {
  data () {
    return {
      dataList:[{name:'请选择一个员工',list:[{id:'',name:''}],sure:''}],
      radio:'1',
      input:null,
      inputa:null,
      isActive:true,
      textarea:'',
    }
  },
  store,
  mounted () {
    store.commit('changeactive', 2)
    if(store.state.pdetail.id){
      this.$api.Node.index({project_id:store.state.pdetail.id}).then(res=>{
        let id = JSON.parse(sessionStorage.getItem('userinfo')).managed_teams.id
        this.$api.Team.user(id,{role_id:res.data.data[0].workflow_node.role_id}).then(res=>{
          this.dataList[0].list = res.data.data
          localStorage.setItem("contitem",JSON.stringify(this.dataList))
        })
      })
    }
  },
  methods:{
    composeValue(item, row) {
      return {
        item1: item,
        item2: row,
      }
    },
    handleCommand(command) {
      this.dataList[command.item1].name = command.item2
    },
    goAdd: function(res) {
      var arr = JSON.parse(localStorage.getItem('contitem'))[0]
      console.log(arr)
      this.dataList.push(arr)
    },
    goLess: function(res) {
      this.dataList.pop()
    },
    change:function(res){
      console.log(res)
    },

    //开始报价
    go_begin(){
      
      let id = store.state.pdetail.node.id
      let arr = []
      for(let i=0;i<this.dataList.length;i++){
        if(this.dataList[i].sure){
          arr.push(this.dataList[i].sure)
        }
      }
      this.$api.Node.updateUser(id,{user_ids:arr}).then(res=>{
        console.log(res)
      })
    },
    //生成订单
    go_generate(){
      this.$api.Order.price(store.state.pdetail.order_id,{price:this.input}).then((res)=>{
        // console.log(res)
        this.$api.Project.update(store.state.pdetail.id,{dead_line:this.inputa}).then((resp)=>{
          // console.log(resp)
          this.$router.go(0)
        })
      })
    },
    //免费开始
    go_free(){
      this.$api.Order.forceUpdate(store.state.pdetail.order_id,{status:4}).then(res=>{
        console.log(res)
      })
    },
    //拒绝
    go_refuse(){
      if(this.textarea){
        this.$api.Order.forceUpdate(store.state.pdetail.order_id,{status:-1,content:this.textarea}).then(res=>{
          console.log(res)
        })
      }else{
        Notification({
          title:'提示',
          message:'请输入拒绝理由',
        })
      }
    }
  },
  watch: {
    radio:function(res){
      if(res == 2){
        this.isActive = false
      }else{
        this.isActive = true
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  .container{
    width: calc(100% - 20px);
    margin-left: 20px;
    height: 100%;
    display: flex;
    .contl{
      width: 50%;
      height: 100%;
      h6{
        width: 102px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        color: #fff;
        background:#56AFF7;
        margin-top: 20px;
        border-radius: 5px;
        cursor: pointer;
      }
      .head{
        display: flex;
        width: 50%;
        margin-bottom: 5px;
        div{
          margin-left: auto;
          display: flex;
          p{
            color: #56AFF7;
            cursor: pointer;
          }
          i{
            display: block;
            margin-left: 20px;
            cursor: pointer;
            color: #F56C6C;
          }
        }
      }
      .drotop{
        width: 50%;
        height: 32px;
        background: #F0F0F0;
        margin-top: 10px;
        border-radius: 5px;
        text-align: center;
        line-height: 32px;
        display: block;

        span{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          box-sizing: border-box;
        }
      }
    }
    .item{
      margin-top: 10px;
      width: 100%;
      & /deep/ .el-select{
        width: 50%;
      }
    }
    .contr{
      width: 50%;
      height: 100%;
      p{
        margin-bottom: 20px;
      }
      h6{
        margin-top: 40px;
        margin-bottom: 10px;
      }
      .el-input{
        width: 50%;
        height: 32px;
      }
      .fonter{
        margin-top: 20px;
        display: flex;
        h5{
          width: 102px;
          height: 26px;
          background:rgba(86,175,247,1);
          border-radius:5px;
          text-align: center;
          line-height: 26px;
          color: #fff;
          margin-right: 80px;
          cursor: pointer;
          font-size: 14px;
        }
        h4{
          width: 132px;
          height: 26px;
          background:rgba(86,175,247,1);
          border-radius:5px;
          text-align: center;
          line-height: 26px;
          color: #fff;
          cursor: pointer;
          font-size: 14px;
        }
      }
      h3{
        font-size: 14px;
        margin-top: 40px;
      }
      textarea{
        width: 50%;
        height: 110px;
        background: #F0F0F0;
        margin-top: 10px;
        margin-bottom: 20px;
        border: none;
        padding: 10px;
      }
      h2{
        width: 102px;
        height: 26px;
        text-align: center;
        line-height: 26px;color: #fff;
        background: #56AFF7;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
  .el-dropdown-menu.el-popper.midul {
    width: calc(25% - 54px);
    min-width: 246px;
    li {
      width: 100%;
      box-sizing: border-box;
    }
  }
</style>